<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理解update enter exit</title>
</head>
<body>
    <!-- Update 和 Enter 的使用 -->
    <h1>Update 和 Enter 的使用</h1>
    <div class="enterBox">
        <p></p>
        <p></p>
    </div>
    <!-- Update 和 Exit 的使用 -->
    <h1>Update 和 Exit 的使用</h1>
    <div class="exitBox">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        /*
         * 一、Update 和 Enter 的使用
         * */
        let enterDataSet = [ 3 , 6 , 9 , 12 , 15 ];
        // 获取 div..enterBox 中的所有 p 元素
        let entP = d3.select('.enterBox').selectAll('p');
        // 获取 update 部分
        let enterUpdate = entP.data(enterDataSet);
        // 获取 enter 部分
        let enterP = enterUpdate.enter();

        // 接下来将分别处理 update 与 enter 部分的内容
        // update部分的处理：更新属性值
        enterUpdate.text( (d) => {
            return `update ${d}`
        });
        // enter部分的处理：添加元素后赋予属性值
        enterP.append('p').text( (d) => {
            return `enter ${d}`
        });

        /*
         * 二、Update 和 Exit 的使用
         * */
        let exitDataSet = [ 3 , 6 , 9 , 12 , 15 ];
        // 获取 div..enterBox 中的所有 p 元素
        let exP = d3.select('.exitBox').selectAll('p');
        // 获取 update 部分
        let exitUpdate = exP.data(exitDataSet);
        // 获取 exit 部分
        let exitP = exitUpdate.exit();

        // 接下来将分别处理 update 与 exit 部分的内容
        // update部分的处理：更新属性值
        exitUpdate.text( (d) => {
            return `update ${d}`
        });
        // exit部分的处理：修改p元素的属性
        exitP.text( () => 'exit');
        //exit部分的处理通常是删除元素
        // exit.remove();
    </script>
</body>
</html>